<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <!-- 导入Bootstrap的css文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!-- 导入register.css的文件 -->
    <link rel="stylesheet" href="../static/css/register.css">
    <!-- 导入浏览器ico图标 -->
    <link rel="shortcut icon" href="../static/images/cup.ico">
</head>

<!-- 具体样式 -->

<body>
    <div class="card" style="width: 30rem;">
        <div class="card-body">
            <h5 class="card-title">欢迎注册账号</h5>
            <h6 class="card-subtitle mb-2 text-muted">每一天，乐在沟通。</h6>
            <p class="card-text">
            <form>
                <div class="form-group">
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                        placeholder="用户名" required autofocus>
                    <small id="emailHelp" class="form-text text-muted"></small>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"
                        name="password">
                </div>
                <div class="form-reGroup">
                    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="确认密码"
                        name="rePassword">
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1" checked="checked">
                    <label class="form-check-label" for="exampleCheck1">我已阅读并同意相关服务条款和隐私政策</label>
                </div>
                <button type="button" class="btn btn-primary" id="btn-ok" onclick="registerOk()">立即注册</button>
                <button type="button" class="btn btn-primary" id="btn-cancel" onclick="cancel()">取消注册</button>
            </form>
            </p>
        </div>
    </div>

    <!-- 逻辑处理 -->
    <script>
        // 立即注册
        function registerOk() {
            // 获取用户名
            let username = $('#exampleInputEmail1').val();
            // 获取密码
            let password = $('#exampleInputPassword1').val();
            // 获取确认密码
            let rePassword = $('#exampleInputPassword2').val();

            // 注册判断
            // 复选框状态
            if ($('#exampleCheck1').is(':checked')) {
                if (username === '') {
                    alert('用户名不能为空！');
                } else if (password === '') {
                    alert('密码不能为空！');
                } else if (rePassword === '') {
                    alert('确认密码不能为空！');
                } else if (password !== rePassword) {
                    alert('两次密码不一致！');
                } else {
                    alert('注册成功！');
                    window.location.href = '/';
                }
            } else {
                alert('请先阅读并同意相关服务条款和隐私政策');
            }
        }

        // 取消注册
        function cancel() {
            // 点击 取消注册 按钮跳转至登录界面
            window.location.href = '/';
        }
    </script>

    <!-- 导入jQuery -->
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <!-- 导入Bootstrap的js文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
</body>

</html>